<template>
	<!-- 服务费 -->
	<view class="u-padding-bottom-30" v-if="details">
		<view class="cost-name">平台服务费</view>
		<view class="cost-amount">
			<text class="u-font-36">¥</text>
			<text>{{details.sellerBillExtend.amount | thousands}}</text>
		</view>
		<view class="warehouse">
			<view class="u-font-28 u-flex u-row-between u-margin-bottom-30">
				<view>流水号</view>
				<view>{{ details.sellerBillExtend.innerId }}</view>
			</view>
			<u-line color="#F2F2F2" />
			<view class="u-font-28 u-flex u-row-between u-margin-top-30 u-margin-bottom-30">
				<view>支付方式</view>
				<view> {{getStatusLabel(paymentMethodType,details.sellerBillExtend.payMode) || "未支付"}}</view>
			</view>
			<u-line color="#F2F2F2" />
			<view class="u-font-28 u-flex u-row-between u-margin-top-30">
				<view>计算公式</view>
				<view>{{ details.sellerBillExtend.expression }}</view>
			</view>
		</view>

		<view class="vehicle-info" v-if="details.serviceFeeBillVo">
			<view class="vehicle-info_title">车辆信息</view>
			<view class="u-margin-top-30">
				<view class="vehicle-info_name u-margin-bottom-20">
					<image src="@/static/img/pic_car.png"></image>
					<view class="u-font-28 u-margin-left-20">
						<text v-for="(item,index) in ['brand', 'series' , 'model' ]" :key="index">
							{{ details.sellerBillExtend[item] }}
						</text>
					</view>
				</view>
				<view class="vehicle-info_details">
					<view class="u-flex u-row-between u-font-26 u-margin-bottom-24">
						<view style="color: #666666;">车架号</view>
						<view> {{ details.sellerBillExtend.vin }}</view>
					</view>
					<view class="u-flex u-row-between u-font-26 u-margin-bottom-24">
						<view style="color: #666666;">服务费利率</view>
						<view> {{ details.serviceFeeBillVo.serviceRatio }} %</view>
					</view>
					<view class="u-flex u-row-between u-font-26">
						<view style="color: #666666;">贷款天数</view>
						<view> {{ details.serviceFeeBillVo.days }} 天</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		getStatusLabel,
		expenseType,
		paymentMethodType
	} from '@/utils/status.js'
	export default {
		data() {
			return {
				type: null,
				details: null,
				expenseType,
				paymentMethodType
			}
		},
		onLoad(options) {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('BillDetails', (res) => {
				this.details = res
			})


			if (options.type) {
				this.type = options.type * 1
				uni.setNavigationBarTitle({
					title: getStatusLabel(this.expenseType, this.type)
				})
			}

		},
		methods: {
			getStatusLabel
		}
	}
</script>

<style scoped lang="less">
	.cost-name {
		color: #202020;
		text-align: center;
		font-size: 15px;
		margin-top: 30px;
	}

	.cost-amount {
		color: #202020;
		font-size: 32px;
		font-weight: bold;
		text-align: center;
		margin-top: 10px;
	}

	.cost-notes {
		font-size: 12px;
		color: #999999;
		text-align: center;
		margin-top: 10px;
	}

	.warehouse {
		padding: 15px;
		background: #FFFFFF;
		box-shadow: 0px 3 4px 0px rgba(217, 226, 233, 0.38);
		border-radius: 8px;
		margin: 30px 15px 10px 15px;
		color: #202020;

		.warehouse-title {
			font-size: 16px;
			font-weight: 500;
			margin-bottom: 15px;
		}
	}

	.vehicle-info {
		background: #FFFFFF;
		box-shadow: 0px 3 4px 0px rgba(217, 226, 233, 0.38);
		border-radius: 8px;
		padding: 15px;
		margin: 0 15px 10px 15px;
		color: #202020;

		.vehicle-info_title {
			font-size: 16px;
			font-weight: 500;
		}

		.vehicle-info_name {
			display: flex;
			align-items: center;

			&>image {
				width: 16px;
				height: 16px;
			}
		}

		.vehicle-info_details {
			background: #F7F7F7;
			border-radius: 8px;
			margin-left: 26px;
			padding: 12px;
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>